<template>
  <div v-bind:style="{ height: height, width: width }">
    <div
      class="editor-container"
      style="width:100%;height:100%"
    ></div>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
export default {
  props: {
    height: {
      default: "500px"
    },
    width: {
      default: "100%"
    },
    value: "",
    language:{
      default:'javascript'
    },
    theme:{
      default:'vs-dark'
    },
  },
  model: {
    prop: "value",
    event: "change"
  },
  watch: {
    // value() {
    //   if (this.editor && this.editor.getValue() != this.value)
    //     this.editor.setValue(this.value);
    //   //else if (!this.editor) this.editor.setValue(this.value);
    // }
  },
  data() {
    return {
      editor: {}
    };
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      debugger
      // 初始化编辑器，确保dom已经渲染
      this.editor = monaco.editor.create(this.$el.getElementsByClassName("editor-container")[0], {
        value: "", //编辑器初始显示文字
        language: this.language, //语言支持自行查阅demo
        automaticLayout: true, //自动布局
        theme: this.theme //官方自带三种主题vs, hc-black, or vs-dark
      });

      if (this.value) this.editor.setValue(this.value);

      // this.editor.onDidChangeModelContent(e => {
      //   console.log(e);
      //   debugger;
      //   this.$emit("change", this.editor.getValue());
      // });
    },
    setValue(value)
    {
      this.editor.setValue(value);
    },
    getValue()
    {
      return this.editor.getValue()
    }
  }
};
</script>

<style></style>
